<template>
  <view class="container">
	  <!-- 顶部自定义导航 -->
	  <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="#F8F8F8">
	  	<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
	  		<view class="">
	  			<text class="tn-margin-left tn-text-bold tn-text-xl leaf-color">我 的</text>
	  		</view>
	  	</view>
	  </tn-nav-bar>
	  <view class="uniList">
		 <uni-list>
		   <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="userList.nickName" />
		   <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="userList.phonenumber" />
		   <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="userList.email" />
		   <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
		   <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
		   <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="userList.createTime" />
		 </uni-list> 
		  
	  </view>
  
  </view>
</template>

<script>
  import { getUserProfile } from "@/api/system/user"

  export default {
    data() {
      return {
        userList: {},
        roleGroup: "",
        postGroup: ""
      }
    },
    onLoad() {
      this.getUser()
    },
    methods: {
      getUser() {
        getUserProfile().then(response => {
          this.userList = response.data
          this.roleGroup = response.roleGroup
          this.postGroup = response.postGroup
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #ffffff;
  }
  .uniList{
	  margin-top: 10vh;
  }
</style>
